<template>
	<view class="content">
		<view class="content-top">
			<image :src="Informations.avatarUrl" mode=""></image>
			<!-- <text v-show="isChange" @tap="changeHead">更换头像</text> -->
		</view>
		<view class="content-bottom">
			<!-- 昵称 -->
			<view class="content-bottom-item">
				<text class="content-bottom-item-son1">昵称</text>
				<text v-if="!isChange" class="content-bottom-item-son2">{{Informations.nickName}}</text>
				<input v-else type="text" v-model="Informations.nickName">
			</view>
			<!-- 电话 -->
			<view class="content-bottom-item">
				<text class="content-bottom-item-son1">电话</text>
				<text v-if="!isChange" class="content-bottom-item-son2">{{Informations.phone}}</text>
				<input v-else type="text" v-model="Informations.phone">
			</view>
			
		</view>
		<button v-if="!isChange" class="changeInfo" @tap="changeInfo">修改信息</button>
		<button v-else class="affirmInfo" @tap="affirmInfo">确认</button>
	</view>
</template>

<script>
	import {basUrl} from "@/common/basUrl.js"
	import {getInformation,updateInformation} from "@/api/home.js"
	export default {
		created() {
			this.showMyInformation()
			// this.updateInformation()
		},
		data() {
			return {
				isChange: false,
				headUrl: '',
				nickName: '微信用户',
				phone: '12312321',
				basUrl:basUrl,
				Informations:[]
			}
		},
		methods: {
			// 更换头像
			changeHead() {
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								console.log("ddddd",uploadFileRes.data);
							},
							fail() {
								console.log('1231qweqw');
							}
						});

						uploadTask.onProgressUpdate((res) => {
							console.log('上传进度' + res.progress);
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);

							// 测试条件，取消上传任务。
							if (res.progress > 50) {
								uploadTask.abort();
							}
						});
					}
				});
			},
			changeInfo() {
				this.isChange = true
			},
			affirmInfo() {
				console.log('headUrl：', this.headUrl);
				console.log('nickName：', this.nickName);
				console.log('phone：', this.phone);
				uni.showToast({
					icon: 'success',
					title: '修改成功'
				})
				this.isChange = false
			},
			//查询用户信息
			showMyInformation(){
				getInformation().then(res=>{
					console.log("dd",res);
					this.Informations = res.data.rows
					
				})
			},
			//修改用户信息
			affirmInfo(){
				updateInformation(this.Informations).then(res=>{
					console.log("oo",res);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
	}

	.content {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #FB7A42;
		// background: url('@/static/Group 234.png') no-repeat;
		background-size: 100%;

		.content-top {
			position: relative;
			width: 90%;
			height: 248rpx;
			margin: 46rpx 5%;
			background: linear-gradient(98.18deg, rgba(255, 255, 255, 0.79) 0%, #FFFFFF 100%);
			box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;

			image {
				position: absolute;
				top: 32rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 144rpx;
				height: 144rpx;
			}

			text {
				position: absolute;
				top: 188rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 28rpx;
				color: #FB7A42;
			}
		}

		.content-bottom {
			width: 90%;
			margin-left: 5%;
			height: 288rpx;
			background: linear-gradient(98.18deg, rgba(255, 255, 255, 0.79) 0%, #FFFFFF 100%);
			box-shadow: 0rpx 4rpx 20rpx rgba(0, 0, 0, 0.06);
			border-radius: 16rpx;

			.content-bottom-item {
				width: 100%;
				height: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.content-bottom-item-son1 {
					font-size: 24rpx;
					font-weight: 400;
					color: #8C8C8C;
				}

				.content-bottom-item-son2 {
					font-weight: 400;
					font-size: 36rpx;
					color: #121B36;
				}

				input {
					border-bottom: 2rpx solid #FB7A42;
					font-size: 44rpx;
					text-align: center;
				}
			}
		}

		button {
			position: fixed;
			bottom: 48rpx;
			width: 90%;
			height: 76rpx;
			line-height: 76rpx;
			margin-left: 5%;
			padding: 0;
			font-style: 36rpx;
			border-radius: 12rpx;
		}

		.changeInfo {
			color: #FB7A42;
			border: 2rpx solid #FB7A42;
		}

		.affirmInfo {
			color: #fff;
			background: #FB7A42;
		}
	}
</style>
